<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>小米登录框</title>

    <style>
        * {
            margin: 0;
            padding: 0;
        }
        .box {
            width: 356px;
            height: 356px;
            margin: 100px auto;
            text-align: center;

        }

        .box h1 {
            width: 46px;
            height: 46px;
            background-color: #ff4c00;
            background-image: url(./images/mi-logo.png);
            background-repeat: no-repeat;
            margin: 0 auto;
        }

.box h2 {
    font-size: 30px;
    font-weight: 400;
    padding: 30px 0;
}

.box .input {
    box-sizing: border-box;
    width: 98%;
    height: 50px;
    padding: 8px 17px;
    display: inline-block;
    margin-bottom: 16px;
    border: 1px solid #ebebeb;
}

.box .loginbtn {
    background-color: #ff4c00;
    color: #fff;
    border: none;
}
    </style>
</head>
<body>
    <div class="box">
        <h1 class="logo"></h1>
        <h2>小米账号登录</h2>
        <input class="input" type="text" placeholder="邮箱/手机/小米ID">
        <input class="input" type="text" placeholder="邮箱/手机/小米ID">
        <input class="input loginbtn"  type="button" value="登 录">
    </div>
    
</body>
</html>